THE GOAL

EDS's goal is to creat and develop fully mocked-up components, with replaceable areas for content. The code repo is the HTML and CSS that brings these designs to life. Every element that includes in the design templates should have corresponding HTML/CSS living within the code repo. When those design templates get updated, the code repo should as well. The marketing team would creat new campaign based on this design system via chamaileon.

UNDERSTAND STAKEHOLDER NEEDS

Before I start designing, it’s the key to evaluate the different types of content that is typically communicated through emails the organization sends. I am working directly with marketing at this point in the process ensures that I am satisfying the stakeholders’ needs.

Once general content types are defined and stakeholder requirements have been established, this is when to start designing the templates.

MODULE-BASED DESIGN

I’ve adopted a module-based design approach to emails — designing small components that represent pieces of content that might be included in an email. At their most basic level, modules are predefined layouts combining text, images, and CTAs. Create modules by using different image sizes, text layouts, and button placements to establish a library of commonly used components.

When designing these modules, it’s also essential to remember to design how they’ll translate between desktop and mobile clients. Responsive email design is a key element in driving engagement for users and also ensuring they have the best experience to consume the information you present.

Modules can be designed using any design program of your choice. I’ve typically used Sketch to create Symbol that will allow other designers to replace images and text to my exact template specifications without altering the overall layout. Similarly. In any sense, it’s important to design these elements in a way that others can easily understand the exact specifications needed to replicate the module on their own. This helps to make the system more scalable and usable for all parties, instead of relying on a single point of contact to make emails work.

Applying modules to email content

Since I started with a module-based approach, it’s easy to mix and match different content layouts to fit the needs of this communication. I’d include a simple header graphic and description module to allow the marketers to write a brief introduction, and apply any relevant graphics to tie the email to the rest of the campaign, a module with product “tiles” and listings, and our normal branded header and footer modules.

Working in the details

In the first template system that I worked on at Allied Telesis, one of the main goals that I’d set was to establish consistency across email design. Emails were frequently created using different type sizes, graphics, and treatments, making them feel like they were coming from different brands, not a unified voice that represented our company.

As I was designing the templates, I wanted to keep the design as simple as possible while requiring marketing stakeholders to need as little help from design as possible when setting up emails.

Having created the foundational elements of your system (the designs and code repo), using design templates with replaceable content areas makes it easy to customize emails to feel very different across messages. These graphic areas can easily be customized with typography, illustration, or lifestyle photos that help each email establish their own sense of personality through the visual representations that are used.